<template>
  <div>
    <vxe-grid ref="tableRef" :loading="loading" :height="tableHeight" :style="{ 'width':tableWidth + 'px' }" v-bind="gridOptions" v-on="gridEvents">
      <template #defaultselect="{ row }">
        <span>{{ row.sexValue?row.sexValue:'--' }}</span>
      </template>
      <template #selectTable="{ row }">
        <el-select v-model="row.sex">
          <el-option v-for="item in sexOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
import selectTable from "@/components/selectTable/index.vue";
import { ref, onMounted,onUnmounted,reactive } from "vue";
import { VxeUI } from 'vxe-table'
const tableRef = ref()
const emit = defineEmits(['updataOptions','editData','newData','removeData'])
const props = defineProps({
    loading: {
        type: Boolean,
        default: false
    },
    tableHeight:{
        type: Number,
        default: 0
    },
    tableWidth:{
        type: Number,
        default: 0
    },
    columns: {
        type: Array,
        default: []
    },
    data:{
        type: Array,
        default: []
    },
    options:{
        type:Array,
        default:[]
    },
    sexOptions:{
      type:Array,
      default:[]
    }
})
const formatSexLabel = (sexList) => {
  if (sexList) {
    return sexList.map(sex => {
      const item = props.selectOptions.find(item => item.value === sex)
      return item ? item.label : sex
    }).join(',')
  }
  return ''
}
const gridOptions = reactive({
  id: 'myCustomUpdate',
  border: true,
  showOverflow: true,
  keepSource: true,
  columnConfig: {
    useKey: true,
    resizable: true
  },
  menuConfig: {
    body: {
      options: props.options
    }
  },
  editConfig: {
    trigger: 'dblclick',
    mode: 'cell',
    showIcon: false,
  },
  rowConfig: {
    isCurrent: true,
    isHover: true
  },
  checkboxConfig: {
    trigger: 'row'
  },
  columns: props.columns,
  data: props.data
})
// 新增表格的方法
const addData = async () => {
  const $table = tableRef.value
  if ($table) {
    const { row: newRow } = await $table.insertAt()
    await $table.setEditCell(newRow, 'name')
  }
}
// 获取新增的数据
const getnewData = (()=>{
  const $table = tableRef.value
  if ($table) {
    // 这是获取到的编辑的数据
    const insertRecords = $table.getInsertRecords()
    return insertRecords
    // emit('newData',insertRecords)
  }
})
// 获取修改的数据
const getEditData = (()=>{
  const $table = tableRef.value
  if ($table) {
    // 这是获取到的编辑的数据
    const updateRecords = $table.getUpdateRecords()
    return updateRecords
  }
})
// 获取删除的数据
const removeTable = (()=>{
  const $table = tableRef.value
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    return selectRecords
  }
})

const gridEvents = {
  editClosed({ row,rowIndex,data }) {
    // console.log(`单击行：`,row,rowIndex,data)
  },
  cellClick({column}){
    if(column.title == "6"){
    //   console.log('点击了',column);
    }
  },
  menuClick ({ menu, row, column }) {
    emit('updataOptions',menu)
  }
}
onMounted(() => {
  
})
defineExpose({
    addData,
    getnewData,
    getEditData,
    removeTable
})
</script>

<style lang="scss" scoped>

</style>